<template>
  <a-config-provider :locale="locale">
    <div id="app">
      <router-view v-if="isRouterAlive"/>
    </div>
  </a-config-provider>
</template>
<script>
  import zhCN from 'ant-design-vue/lib/locale-provider/zh_CN'
  import enquireScreen from '@/utils/device'

  export default {
    data () {
      return {
        locale: zhCN,
        isRouterAlive: true
      }
    },
    provide() {
      return {
        reload: this.reload
      }
    },
    created () {
      let that = this
      enquireScreen(deviceType => {
        // tablet
        if (deviceType === 0) {
          that.$store.commit('TOGGLE_DEVICE', 'mobile')
          that.$store.dispatch('setSidebar', false)
        }
        // mobile
        else if (deviceType === 1) {
          that.$store.commit('TOGGLE_DEVICE', 'mobile')
          that.$store.dispatch('setSidebar', false)
        }
        else {
          that.$store.commit('TOGGLE_DEVICE', 'desktop')
          that.$store.dispatch('setSidebar', true)
        }

      })
    },
    mounted() {
    const {name,version,isMobile} = getBrowserInfo()
    console.log(name,version,navigator)
    if(name=='Safari'){
      // document.documentElement.style.setProperty('--ant-btn-before', `none`);
      // setTimeout(()=>{
      //   document.documentElement.style.setProperty('--ant-btn-before', `unset`);
      // },2000)

      document.documentElement.style.setProperty('--animation-name', `none`);
      document.documentElement.style.setProperty('--animation-name-1', `none`);
    }
  },
    methods: {
      reload() {
        this.isRouterAlive = false
        // 此处使用 this.$nextTick 是为了实现异步的效果
        this.$nextTick(function() {
          this.isRouterAlive = true
        })
      }
    }
  }
</script>
<style>
  #app {
    height: 100%;
  }
</style>
<style>
:root{
  --animation-name: throttle 2s step-end forwards;
  --animation-name-1: throttle1 10s step-end forwards;
  --ant-btn-before: none;
}


@keyframes throttle {
  from {
    pointer-events: none;
    opacity: .65;
    cursor: not-allowed;
  }

  to {
    pointer-events: auto;
    opacity: 1;
    cursor: pointer;
  }
}

@keyframes throttle1 {
  0% {
    opacity: .65;
    cursor: not-allowed ;
  }
  10% {
    pointer-events: none;
    cursor: not-allowed
  }

  100% {
    pointer-events: auto;
    opacity: 1;
    cursor: pointer;
  }
}
@-webkit-keyframes throttle {
  from {
    pointer-events: none;
    opacity: .65;
    cursor: not-allowed;
  }

  to {
    pointer-events: auto;
    opacity: 1;
    cursor: pointer;
  }
}

@-webkit-keyframes throttle1 {
  0% {
    opacity: .65;
    cursor: not-allowed ;
  }
  10% {
    pointer-events: none;
    cursor: not-allowed
  }

  100% {
    pointer-events: auto;
    opacity: 1;
    cursor: pointer;
  }
}



.ant-btn {
  animation: var(--animation-name) !important;
}
.ant-btn:active {
  animation: var(--animation-name-1) !important;
}
.ant-btn:not(:hover) {
  animation: none;
}
.ant-btn {
  cursor: pointer;
}


.ant-btn[ant-click-animating-without-extra-node] {
  animation: var(--animation-name) !important;
}
.ant-btn:active {
  animation: var(--animation-name-1) !important;
}
.ant-btn:not(:hover) {
  animation: none;
}
.ant-btn[ant-click-animating-without-extra-node=false] {
  cursor: pointer ;
}
.ant-btn::before{
  pointer-events: var(--ant-btn-before) !important;
}
</style>
